﻿<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Full Layout - jQuery EasyUI Demo</title>
        <link href="__PUBLIC__/js/themes/default/easy_ui.css" rel="stylesheet" type="text/css" />
        <link href="__PUBLIC__/js/themes/icon.css" rel="stylesheet" type="text/css" />
        <link href="__PUBLIC__/css/demo.css" rel="stylesheet" type="text/css" />
        <script src="__PUBLIC__/js/jquery-1.8.0.min.js" type="text/javascript"></script>
        <script src="__PUBLIC__/js/jquery.easyui.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function() {
                GetUserAndUserGroupData();
            })
            var rowId;
            function loadData() {

                var params = {"userGroupId": '"' + userGroupId + '"', userName: '"' + $("#txtUserName").val() + '"'};
                //表格初始化
                $('#tbGrid').datagrid({
                    title: '用户列表',
                    iconCls: 'icon-save',
                    width: '100%',
                    data: UserInfo,
                    height: 'auto',
                    queryParams: params,
                    nowrap: false,
                    striped: true,
                    remoteSort: false,
                    columns: [[
                            {field: 'userId', hidden: true},
                            {field: 'groupName', hidden: true},
                            {field: 'userName', title: '用户名', width: 300, align: 'left'},
                            {field: 'groupId', title: '所属组', width: 300, align: 'left', resizable: true, editable: false, editor: {type: 'combobox', options: {onSelect: userGroupSelect, 'panelHeight':'auto',valueField: 'id', textField: 'text', data: GroupData}}
                            }
                        ]],
                    onClickCell: function(index, field, value) {
                        var row = $(this).datagrid('getSelected');
                        if (row != null) {
                            var i = $(this).datagrid('getRowIndex', row);
                            var ed = $(this).datagrid('getEditor', {index: i, field: 'groupId'});
                            ed.target.combobox("select", ed.target.combobox("getText"));
                            $(this).datagrid('endEdit', i);
                        }
                        $(this).datagrid('beginEdit', index);
                        rowId = index;
                        var ed = $(this).datagrid('getEditor', {index: index, field: 'groupId'});
                        $(ed.target).focus();
                    }
                });
                ReComboxValue();
                $('#tt').tree({
                    url: "{:U('UserGroup/GetUserGroupAll')}",
                    method: 'get',
                    animate: true,
                    onContextMenu: function(e, node) {
                        e.preventDefault();
                        $(this).tree('select', node.target);
                        $('#mm').menu('show', {
                            left: e.pageX,
                            top: e.pageY
                        });
                    },
                    onAfterEdit: function(node) {
                        userGroupEdit(node.text, node.id);
                    },
                    onClick: function(node) {
                        $("#txtUserName").val('');
                        userGroupClick(node.id);
                    }
                });
            }

            function append() {
                var t = $('#tt');
                var node = t.tree('getSelected');
                t.tree('append', {
                    parent: (node ? node.target : null),
                    data: [{
                            text: 'new item',
                            id: ''
                        }]
                });
            }
            function collapse() {
                var node = $('#tt').tree('getSelected');
                $('#tt').tree('collapse', node.target);
            }
            function expand() {
                var node = $('#tt').tree('getSelected');
                $('#tt').tree('expand', node.target);
            }
            var userGroupId = "";
            //表格数据加载
            function LoadDataGridData() {
                var params = {"groupId": userGroupId, "userName": $("#txtUserName").val()};
                $.ajax({
                    url: "{:U('UserGroup/GetUser')}",
                    type: "POST",
                    data: params,
                    cache: true,
                    dataType: "json",
                    success: function(data) {
                        UserInfo = data;
                        $('#tbGrid').datagrid("loadData", UserInfo);
                        ReComboxValue();
                    }
                });

            }
            //重新加载Tree数据
            function LoadTreeData() {
                $('#tt').tree("reload");
            }
            //重新加载Tree数据
            function LoadTreeData() {
                $('#tt').tree("reload");
            }
            //用户组选择
            function userGroupSelect() {
                var ed = $('#tbGrid').datagrid('getEditor', {index: rowId, field: 'groupId'});
                var userGroupId = ed.target.combobox("getValue");
                var row = $('#tbGrid').datagrid('getSelected');
                $.ajax({
                    url: "{:U('UserGroup/MoveUserToGroup')}",
                    type: "POST",
                    cache: true,
                    data: {userId: row.userId, groupId: userGroupId},
                    success: function(data) {
                        if (data == 'y') {
                            // $('#tbGrid').datagrid('endEdit', rowId);
                            //  alert("用户组修改成功!");
                        }
                        else {
                            alert("用户组修改失败!");
                        }
                    }
                });
            }
            //用户组编辑
            function userGroupEdit(groupName, groupId) {
                $.ajax({
                    url: "{:U('UserGroup / EditGroupName')}",
                    type: "POST",
                    cache: true,
                    data: {groupName: groupName, groupId: groupId},
                    success: function(data) {
                        //LoadDataGridData();
                        if (groupId == "") {
                            GetUserAndUserGroupData();
                        }
                        else {
                            LoadDataGridData();
                        }
                    }
                });
            }
            //用户组单击
            function userGroupClick(groupId) {
                userGroupId = groupId;
                LoadDataGridData();
            }
            var UserGroupTree = [];
            var UserInfo = "";
            var GroupData = [];
            function GetUserAndUserGroupData() {
                $.ajax({
                    url: "{:U('UserGroup/GetUserGroupAll')}",
                    type: "POST",
                    cache: true,
                    dataType: "json",
                    success: function(data) {
                        if (data[0].children != null && data[0].children != undefined) {
                            for (var i = 0; i < data[0].children.length; i++) {
                                GroupData.push(data[0].children[i]);
                            }
                        }
                        $.ajax({
                            url: "{:U('UserGroup/GetUser')}",
                            type: "POST",
                            cache: true,
                            dataType: "json",
                            success: function(data) {
                                UserInfo = data;
                                loadData();
                            }
                        });
                    }
                });
            }
            function ReComboxValue() {
                var rows = $("#tbGrid").datagrid('getRows');
                for (var i = 0; i < rows.length; i++) {
                    $('#tbGrid').datagrid('beginEdit', i);
                    var ed = $('#tbGrid').datagrid('getEditor', {index: i, field: 'groupId'});
                    ed.target.combobox("setValue", rows[i].groupName);
                    $('#tbGrid').datagrid('endEdit', i);
                }
            }
            //用户组单击
            function userGroupClick(groupId) {
                userGroupId = groupId;
                LoadDataGridData();
            }
            function editTree() {
                var node = $('#tt').tree('getSelected');
                $('#tt').tree('beginEdit', node.target);
            }

            function UpdateData() {
                var params = {"IsUpdate": "1"};
                $.ajax({
                    url: "{:U('UserGroup/GetUser')}",
                    type: "POST",
                    data: params,
                    cache: true,
                    dataType: "json",
                    success: function(data) {
                        UserInfo = data;
                        $('#tbGrid').datagrid("loadData", UserInfo);
                        ReComboxValue();
                    }
                });
            }
        </script>
    </head>
    <body class="easyui-layout">
        <!--左边-->
        <div data-options="region:'west',split:true,title:'用户组'" style="width: 150px; padding: 10px;">
            <ul id="tt" class="easyui-tree">
            </ul>
            <div id="mm" class="easyui-menu" style="width: 120px;">
                <div onclick="append()" data-options="iconCls:'icon-add'">
                    添加</div>
                <div onclick="editTree()" data-options="iconCls:'icon-add'">
                    编辑</div>
                <div class="menu-sep">
                </div>
                <div onclick="expand()">
                    展开</div>
                <div onclick="collapse()">
                    收缩</div>
            </div>
        </div>
        <!--右边-->
        <div data-options="region:'center',title:''">
            <div id="toolbar" style="padding: 5px; height: auto">
                <div>
                    用户名:
                    <input type="text" name="txtUserName" id="txtUserName" value="" />
                    <a href="#" class="easyui-linkbutton" iconcls="icon-search" onclick="LoadDataGridData()">
                        查询</a> <a href="#" class="easyui-linkbutton" iconcls="icon-search" onclick="UpdateData()">
                        更新</a>
                </div>
            </div>
            <table class="easyui-datagrid" id="tbGrid" toolbar="#toolbar" singleselect="true">
            </table>
        </div>
    </body>
</html>
